<template>
  <div class="create">
    <div>
      <h1>文件列表</h1>
      <Row style="margin: 5px 0;">
        <Col span="8" style="display: flex;"
          >自定义类型：
          <Input
            v-model="formItem.CustomType"
            placeholder="Enter something..."
            style="width: 300px"
            search
            enter-button="搜索"
          />
        </Col>
        <Col span="8"
          >文件类型：<Select v-model="formItem.Type" style="width: 300px">
            <Option
              v-for="item in kindList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select></Col
        >
        <Col span="8"></Col>
      </Row>
      <Button type="primary" style="margin-bottom: 10px" @click="handleNewUser"
        >新增</Button
      >&nbsp;&nbsp;

      <Button
        type="primary"
        style="margin-bottom: 10px"
        @click="searchFileManagement"
        >删除</Button
      >
      &nbsp;&nbsp;
      <Button type="primary" style="margin-bottom: 10px" @click="chilcks"
        >刷新</Button
      >
    </div>
    <div>
      <Table border :columns="columns" :data="ListData"></Table>
    </div>
    <Page
      :total="dataCount"
      :current="pageCurrent || 1"
      :page-size="pageSize"
      :page-size-opts="pageSizeOpts"
      show-total
      show-elevator
      show-sizer
      @on-change="changePageCurrent"
      @on-page-size-change="changePageSize"
      style="padding: 10px 0; display: flex; justify-content: center"
    ></Page>

    <!-- 编辑弹框 -->
    <Modal
      v-model="submintModa"
      :title="'新增'"
      @on-ok="handleSave"
      @on-cancel="handleCancel"
    >
      <Row class="RowStyle">
        <i-col span="8" style="line-height: 25px">类型</i-col>
        <i-col span="14">
          <Select v-model="formItem.Type">
            <Option
              v-for="item in kindList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </i-col>
      </Row>
      <Row>
        <i-col span="8" style="line-height: 25px">自定义类型</i-col>
        <i-col span="14">
          <Input
            v-model="formItem.CustomType"
            placeholder="Enter something..."
          />
        </i-col>
      </Row>
      <Row class="RowStyle">
        <i-col span="8" style="line-height: 25px">文件上传</i-col>
        <i-col span="14">
          <Upload
            :action="$httpUrl + '/put-file'"
            :on-success="getUploadURL"
            :headers="getAuthHeaders()"
            type="drag"
            :show-upload-list="false"
          >
            <div style="padding: 20px 0">
              <Icon
                type="ios-cloud-upload"
                size="52"
                style="color: #3399ff"
              ></Icon>
              <p>上传文件</p>
            </div>
          </Upload>
        </i-col>
      </Row>
    </Modal>
  </div>
</template>

<script>
import { getUser, postUpdata, postRemove } from "@/api/user";
import { postRegister } from "@/api/login";
import adminAPI from "@/api/adminAPI";
import { mapActions, mapState, mapMutations } from "vuex";
import { dateForma } from "@/common/until.js";
//import viewDetails from './components/viewDetils'
export default {
  components: {},
  data() {
    return {
      defaultList: [],
      modelKind: 1,
      kindList: [
        {
          value: 0,
          label: "图片",
        },
        {
          value: 1,
          label: "文件",
        },
        {
          value: 2,
          label: "mp3",
        },
        {
          value: 3,
          label: "mp4",
        },
        {
          value: 4,
          label: "压缩包",
        },
        {
          value: 5,
          label: "安装包",
        },
      ],
      Id: "", //存储ID
      classlyName: "", //分类名
      submintModa: false, //编辑弹框显示
      isEdit: false, //是否是编辑
      classlyNameObject: {},
      careData: [],
      adminUserObject: {},
      adminicon: "",
      avatarUrl: "",
      originalname: "",
      formItem: {
        Id: 0,
        Name: "",
        Type: 0,
        CustomType: "",
        Path: "",
        Url: "",
        Visits: 0,
        Ctime: 0,
        Cuser: "",
        Mtime: 0,
        Muser: "",
      },
      editFormItem: {},
    };
  },
  computed: {
    ListData() {
      return this.$store.state.fileManagement.ListData;
    },
    pageCurrent() {
      return this.$store.state.fileManagement.pageCurrent;
    },
    pageSize() {
      return this.$store.state.fileManagement.pageSize;
    },
    pageSizeOpts() {
      return this.$store.state.fileManagement.pageSizeOpts;
    },
    dataCount() {
      return this.$store.state.fileManagement.dataCount;
    },
    columns() {
      return [
        {
          title: "Id",
          key: "Id",
          align: "center",
          width: 160,
        },
        {
          title: "类型",
          key: "Type",
          align: "center",
          width: 160,
          render: (h, params) => {
            let showView = "";
            if (params.row.Type === 0) {
              showView = "图片";
            } else if (params.row.Type === 1) {
              showView = "文件";
            } else if (params.row.Type === 2) {
              showView = "mp3";
            } else if (params.row.Type === 3) {
              showView = "mp4";
            } else if (params.row.Type === 4) {
              showView = "zip";
            } else {
              showView = "其他";
            }
            return h("div", showView);
          },
        },
        {
          title: "自定义类型",
          key: "CustomType",
          align: "center",
          width: 160,
        },
        {
          title: "文件名",
          key: "Name",
          align: "center",
          width: 160,
        },
        {
          title: "下载路径",
          key: "Url",
          align: "center",
          width: 260,
        },
        {
          title: "绝对路径",
          key: "Path",
          align: "center",
          width: 260,
        },
        {
          title: "下载量",
          key: "Visits",
          align: "center",
          width: 100,
        },
        {
          title: "修改时间",
          key: "Mtime",
          align: "center",
          width: 160,
          render: (h, params) => {
            return h(
              "div",
              dateForma(new Date(params.row.Mtime), "yyyy-MM-dd hh:mm:ss")
            );
          },
        },
        {
          title: "修改者",
          key: "Muser",
          align: "center",
          width: 160,
        },

        {
          title: "创建时间",
          key: "Ctime",
          align: "center",
          width: 160,
          render: (h, params) => {
            return h(
              "div",
              dateForma(new Date(params.row.Ctime), "yyyy-MM-dd hh:mm:ss")
            );
          },
        },
        {
          title: "创建者",
          key: "Cuser",
          align: "center",
          width: 160,
        },
        {
          title: "编辑",
          key: "edit",
          align: "center",
          fixed: "right",
          width: 200,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "10px",
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    },
                  },
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                  },
                  on: {
                    click: () => {
                      this.remove(params.row.Id);
                    },
                  },
                },
                "删除"
              ),
            ]);
          },
        },
      ];
    },
  },
  methods: {
    ...mapActions([
      "searchFileManagement",
      "addFileManagement",
      "deleteFileManagement",
      "editFileManagement",
    ]),
    ...mapMutations(["setFileManagement"]),

    //新建
    handleNewUser() {
      //开弹框
      this.submintModa = true;
      this.isEdit = false;
      this.adminUserObject = {};
      this.adminicon = "";
    },
    //显示编辑
    edit(row) {
      //通过id查找 ---> 获取相关数据  ----> 编辑弹框 ---> 将数据渲染到编辑弹框
      this.isEdit = true;
      this.submintModa = true;
      // this.formItem = row;
      this.formItem.Id = row.Id;
      this.formItem.Name = row.Name;
      this.formItem.Type = row.Type;
      this.formItem.CustomType = row.CustomType;
      this.formItem.Path = row.Path;
      this.formItem.Url = row.Url;
      this.formItem.Visits = row.Visits;
      this.formItem.Ctime = row.Ctime;
      this.formItem.Cuser = row.Cuser;
      this.formItem.Mtime = row.Mtime;
      this.formItem.Muser = row.Muser;
    },
    //删除
    async remove(index) {
      //获取Id --->  删除接口 --> Id 查找
      this.$Modal.confirm({
        title: "是否删除？",
        onOk: () => {
          this.deleteFileManagement(index).then(() => {
            //刷新列表
            this.$Message.success("删除成功！");
            this.searchFileManagement();
          });
        },
        onCancel: () => {
          this.$Message.info("取消");
        },
      });
    },
    //取消
    handleCancel() {
      this.$Message.info("cancel");
    },
    //
    changePageCurrent(current) {
      this.setFileManagement({
        pageCurrent: current,
      });
      this.Init();
    },
    changePageSize(pageSize) {
      this.setFileManagement({
        pageSize: pageSize,
      });
      this.Init();
    },
    //弹框保存按钮
    handleSave() {
      //通过接口保存数据 ----> name
      if (this.isEdit) {
        // 编辑
        this.editFileManagement({
          Id: this.formItem.Id,
          Name: this.formItem.Name,
          Type: this.formItem.Type,
          CustomType: this.formItem.CustomType,
        }).then((res) => {
          console.log("__res__", res);
          if (res.data.code === 2000) {
            this.$Message.success("编辑成功");
            this.searchFileManagement();
          } else {
            this.$Message.error("编辑失败！");
          }
        });
      } else {
        // 新增
        this.addFileManagement(this.formItem).then((res) => {
          if (res.data.code === 2000) {
            this.$Message.success("添加成功");
            this.searchFileManagement();
          } else {
            this.$Message.error("保存失败！");
          }
        });
      }
    },
    //图片上传
    getUploadURL(res) {
      console.log("____res__", res);
      if (res.code === 2000 && res != undefined) {
        this.$Message.success("上传成功");
        this.formItem.Path = res.data.url;
        this.formItem.Url = this.$httpUrl + res.data.url;
        this.formItem.Name = res.data.originalname;
      } else {
        this.$Message.error("失败！");
      }
    },
    getAuthHeaders() {},

    chilcks() {
      this.searchFileManagement({ offset: 0 });
    },
    Init() {
      this.setFileManagement({
        searchValue: "",
      });
      this.searchFileManagement({ offset: 0 });
    },
  },
  created() {
    this.Init();
  },
  mounted() {},
};
</script>

<style scoped lang="less">
.create {
  margin: 50px 30px 0 30px;
}
.RowStyle {
  margin: 20px;
}
</style>
